// 实例2： class组件
import React from "react"

export default class Demo2 extends React.Component {
    constructor(props) {
        super(props) // 调用父类构造函数

        this.state = { count: 0, name: "zhangsan" }
    }

    increment = () => {
        // this.setState({ count: this.state.count + 1 })
        this.setState((prevState) => {
            return { count: prevState.count + 1 } // 不需要解构prevState，name属性不会被替换
        })
    }

    // 组件挂载
    componentDidMount() {}
    // 组件更新
    componentDidUpdate() {}

    // 组件卸载
    componentWillUnmount() {}

    render() {
        return (
            <div className="main_text">
                <p>1.ES6 类，继承自 React.Component</p>
                <p>2.通过 constructor 构造函数 this.state 初始化，this.setState 更新，this.state访问</p>
                <p>3.内置生命周期函数，在不同阶段使用不同生命周期函数</p>
                <p>4.事件绑定，使用箭头函数，避免this指向问题</p>
                <p>5.需创建类实例，占用更多内存</p>
                <p>6.逻辑复用容易产生“嵌套地狱”</p>
                {/* <div>{this.state.count}</div>
                <button onClick={this.increment}>+1</button> */}
            </div>
        )
    }
}
